<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../cr_elements/cr_input/cr_input.html">
<link rel="import" href="../../../cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="../../../cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="../../../cr_elements/policy/cr_policy_indicator.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="../../../cr_elements/md_select_css.html">
<link rel="import" href="cr_policy_network_behavior_mojo.html">
<link rel="import" href="network_shared_css.html">
<link rel="import" href="onc_mojo.html">

<dom-module id="network-nameservers">
  <template>
    <style include="network-shared md-select iron-flex">
      a {
        margin-inline-start: 4px;
      }

      cr-input {
        margin-bottom: 4px;
        /* Aligns with the start of cr-radio-button's text. */
        margin-inline-start: 38px;
      }

      cr-radio-group {
        --cr-radio-group-item-padding: 12px;
        width: 100%;
      }

      .nameservers {
        /* Aligns with the start of cr-radio-button's text. */
        margin-inline-start: 38px;
        padding-bottom: 0;
        padding-top: 0;
      }

      .nameservers:not([changeable]) {
        opacity: var(--cr-disabled-opacity);
      }

      #radioGroupDiv {
        align-items: center;
        display: block;
        padding-inline-end: var(--cr-section-padding);
        padding-inline-start: var(--cr-section-padding);
      }

      cr-policy-indicator {
        /* Aligns with the other policy indicators. */
        margin-inline-end: calc(var(--settings-control-label-spacing) + 34px);
      }
    </style>

    <div class="property-box">
      <div class="start">
        [[i18n('networkNameservers')]]
      </div>
      <cr-policy-indicator indicator-type="[[getPolicyIndicatorType(
          managedProperties.nameServersConfigType)]]">
      </cr-policy-indicator>
    </div>
    <div id="radioGroupDiv">
      <cr-radio-group id="nameserverType" class="layout vertical"
          selected="[[nameserversType_]]"
          on-selected-changed="onTypeChange_"
          aria-label="[[i18n('networkNameservers')]]"
          disabled="[[disabled]]">
        <!-- Automatic nameservers -->
        <cr-radio-button name="[[nameserversTypeEnum_.AUTOMATIC]]"
          disabled="[[!canChangeConfigType_]]">
          [[i18n('networkNameserversAutomatic')]]
        </cr-radio-button>
        <template is="dom-if" if="[[showNameservers_(nameserversType_,
            nameserversTypeEnum_.AUTOMATIC, nameservers_)]]">
          <div class="nameservers" changeable$="[[canChangeConfigType_]]">
            [[getNameserversString_(nameservers_)]]
          </div>
        </template>

        <!-- Google nameservers -->
        <cr-radio-button name="[[nameserversTypeEnum_.GOOGLE]]"
          disabled="[[!canChangeConfigType_]]">
          [[i18n('networkNameserversGoogle')]]
          <template is="dom-if"
              if="[[i18nExists('networkGoogleNameserversLearnMoreUrl')]]">
            <a href="[[i18n('networkGoogleNameserversLearnMoreUrl')]]"
                target="_blank" on-click="doNothing_">
              [[i18n('networkNameserversLearnMore')]]
            </a>
          </template>
        </cr-radio-button>
        <template is="dom-if" if="[[showNameservers_(nameserversType_,
            nameserversTypeEnum_.GOOGLE, nameservers_)]]">
          <div class="nameservers" changeable>
            [[getNameserversString_(nameservers_)]]
          </div>
        </template>

        <!-- Custom nameservers -->
        <cr-radio-button name="[[nameserversTypeEnum_.CUSTOM]]"
          disabled="[[!canChangeConfigType_]]">
          [[i18n('networkNameserversCustom')]]
        </cr-radio-button>
        <template is="dom-if" if="[[showNameservers_(nameserversType_,
            nameserversTypeEnum_.CUSTOM)]]">
          <div class="property-box single-column two-line">
            <template is="dom-repeat" items="[[nameservers_]]">
              <cr-input id="nameserver[[index]]" value="{{item}}"
                  aria-label="[[getCustomNameServerInputA11yLabel_(index)]]"
                  on-change="onValueChange_"
                  disabled="[[!canEditCustomNameServers_(nameserversType_,
                      managedProperties)]]">
              </cr-input>
            </template>
          </div>
        </template>
      </cr-radio-group>
    </div>

  </template>
  <script src="network_nameservers.js"></script>
</dom-module>
